<template>
	<view class="content">
		<view class="status_bar"></view>
		<Head :webtext="webtext"></Head>
		<view class="body">
			<view class="mySearchBox">
				<view class="timeBox">
					<view @click="selStart">{{ defaultStartTime }}</view>
					<u-picker
						mode="time"
						:defaultTime="defaultStartTime"
						v-model="startShow"
						:params="paramsTime"
						end-year="2030"
						@confirm="confirmStart"
						confirm-color="#F6AB00"
					></u-picker>
				</view>
				<view class="timeBox">
					<view @click="selEnd">{{ defaultEndTime }}</view>
					<u-picker
						mode="time"
						:defaultTime="defaultEndTime"
						v-model="endShow"
						:params="paramsTime"
						end-year="2030"
						@confirm="confirmEnd"
						confirm-color="#F6AB00"
					></u-picker>
				</view>
				<view class="search" @click="getList()">搜索</view>
			</view>
			<view class="listBox">
				<view class="listHeader">
					<text>轮数</text>
					<text>投资结果</text>
					<text>本轮投资</text>
					<text>本轮结算</text>
				</view>
				<view class="listContent"></view>
			</view>
		</view>
	</view>
</template>
<script>
import Head from '../../components/head.vue';
export default {
	components: {
		Head
	},
	data() {
		return {
			webtext: '投资记录',
			paramsTime: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			startShow: false,
			endShow: false,
			form: {
				defaultStartTime: '',
				defaultEndTime: ''
			},
			list: []
		};
	},
	onLoad() {
		this.defaultStartTime = '开始日期';
		this.defaultEndTime = '结束日期';
		this.getList();
	},
	methods: {
		getList() {
			if (this.form.defaultStartTime === '开始日期') {
				this.form.defaultStartTime = '';
			} else {
				this.form.defaultStartTime = this.defaultStartTime;
			}
			if (this.form.defaultEndTime === '开始日期') {
				this.form.defaultEndTime = '';
			} else {
				this.form.defaultEndTime = this.defaultEndTime;
			}
			// // this.$u.api
			// 	.investemntList(this.form)
			// 	.then(res => {
			// this.list = res
			// 	});
		},
		selStart() {
			this.defaultStartTime = this.getDate();
			this.startShow = true;
		},
		selEnd() {
			this.defaultEndTime = this.getDate();
			this.endShow = true;
		},
		confirmStart(e) {
			this.defaultStartTime = e.year + '-' + e.month + '-' + e.day;
		},
		confirmEnd(e) {
			this.defaultEndTime = e.year + '-' + e.month + '-' + e.day;
		},
		changeStatus(index) {
			this.current = index;
		},
		getDate(type) {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		}
	}
};
</script>

<style lang="scss" scoped>
.mySearchBox {
	display: flex;
	justify-content: space-around;
	.timeBox {
		width: 30%;
		height: 60upx;
		padding: 0 6upx;
		float: left;
		line-height: 60upx;
		margin-right: 10upx;
		font-size: 0.8em;
		text-align: center;
		color: #f1f1f1;
		border: 2upx solid rgba(255, 255, 255, 0.5) !important;
	}
	.search {
		width: 30%;
		height: 60upx;
		padding: 0 6upx;
		float: left;
		line-height: 60upx;
		margin-right: 10upx;
		font-size: 0.8em;
		text-align: center;
		color: #f1f1f1;
		border: 2upx solid rgba(255, 255, 255, 0.5) !important;
	}
}
.listHeader {
	display: flex;
	justify-content: space-around;
	width: 95%;
	margin: 40upx auto;
	text-align: center;
	background-color: #323a5d;
	padding: 4upx;
	border-radius: 4upx;
	color: #fff;
	line-height: 1.8;
}
.listContent {
	width: 95%;
	height: 99%;
	min-height: 900upx;
	margin: 0 auto;
	padding: 4upx;
	background-color: #323a5d;
	border-radius: 10upx;
}
</style>
